import React from 'react';
import { connect } from 'dva';
import { TabBar, Icon,ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import defaultImage from '../../../assets/avatar.jpg';
import styles from './common.css';

import Search from './pages/search/search';
import PictureCarousel from './pages/pictureCarousel/pictureCarousel';
import CategoryNav from './pages/categoryNav/categoryNav';
import PartTimeList from './pages/partTimeList/partTimeList';
import token from '../../../framework/utils/token';

function PartTime({ dispatch, loading, partTime,relations }) {

  const { jobList, adList, pageNum, CityArr, pages } = partTime;
  const { cityName } = relations;
  const { limitPost } = relations;

  const getLatAndLng = () => {

    const qq = window.MC.qq;
    const key = window.MC.TXMapKey;
    const options = {timeout: 8000};
    if(qq){
      // console.log('limitPost',limitPost)
      if(limitPost){
        return;
      }
      const geolocation = new qq.maps.Geolocation(key, "part-time");
      geolocation.getLocation(sucCallback,null,options);
      function sucCallback(value) {
        // console.log('value',value)
        if(value.lat && value.lng){
          window.MC.latitude = value.lat;
          window.MC.longitude = value.lng;
          window.MC.cityName = value.city;
          // console.log('window.MC.latitude',window.MC.latitude);
          // console.log('window.MC.longitude',window.MC.longitude);
          // console.log('value.city',value.city);
          dispatch({
            type: 'relations/querySuccess',
            payload:{
              cityName:value.city,
              limitPost:true,
            }
          })
          if(token.get()){
            dispatch({
              type: 'relations/postLatAndLng',
              payload:{
              }
            })
          }

          dispatch({
            type: 'partTime/query',
            payload:{
            }
          })
        }
      }
    }
  }

  const showAd = (list) => {
    const adProps = {
      list,
      pageNum,
    }
    if(list && list.length > 0){
      return <PictureCarousel {...adProps}/>;
    }
  }

  const partTimeListProps = {
    list: jobList,
    onViewMember(id){
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    },
    onPagination() {
      // console.log('loading',loading);
      // console.log('pageNum',pageNum);
      // console.log('pages',pages);
      if (loading || JSON.stringify(jobList) == "[]") {
        return;
      }

      if (parseInt(pageNum) >= parseInt(pages)) {
        return;
      }
      dispatch({
        type: 'partTime/query',
        payload: {
          pageNum: pageNum + 1,
        }
      })
    }
  };

  const searchProps = {
    CityArr,
    cityName,
    onOk(){
      console.log('进入搜索页');
      dispatch({
        type:'search/querySuccess',
        payload:{
          jobList:[],
        }
      })
      dispatch(routerRedux.push({
        pathname: '/search',
      }))
    },
    onCitySelect(){
      dispatch(routerRedux.push({
        pathname: '/city-select',
      }))
    }
  }

  const categoryNavProps = {
    onViewClick(itemData){
      // console.log('分类', JSON.stringify(item));
      dispatch({
        type:'categoryNavPartTime/querySuccess',
        payload:{
          itemData,
          isShow:-1,
          ordeyIndex:0,
          areaIndex:0,
          typeNameIndex:0,
          key:'',
          typeId:'',
          district :'',
        }
      })
      dispatch(routerRedux.push({
        pathname:'/category-nav-part-time'
      }))
    }
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F2F2F2'}}></div>;
  const MarginTop = () => <div style={{height: '2.8125em', backgroundColor:'#F2F2F2'}}></div>;
  const MarginBottom = () => <div style={{height: '3.125em', backgroundColor:'#F2F2F2'}}></div>;
  const CutLine = () => <div style={{width: '100%', height:'1px', backgroundColor:'#E4E4E4'}}></div>;

  return (
    // <div style={{marginTop:'2.8125em'}}>
    <div>
      {getLatAndLng()}
      <Search {...searchProps}/>
      <MarginTop/>
      {showAd(adList)}
      {/* <CategoryNav {...categoryNavProps}/> */}
      {/* <MarginHeight/> */}
      <PartTimeList {...partTimeListProps}/>
      {/* <MarginBottom/> */}
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
    </div>
  )
}

PartTime.propTypes = {
};

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    partTime: state.partTime,
    relations: state.relations,
  }
}
export default connect(mapStateToProps)(PartTime);
